<template>
	<view>
		<!-- <view class="top-title">
			<text style="padding-top:100rpx;font-size: 36rpx;font-weight: 500;">个人中心</text>
		</view> -->
		<view class="newgeren">
			<view class="title">
				<image :src="hasLogin && userInfo.avatarUrl ? userInfo.avatarUrl : '../../static/user/touxiang-@2x.png'" class="img" mode="aspectFill"></image>
				<!-- <image @click="navTo('/pages/user/profile')" :src="hasLogin && userInfo.avatarUrl ? userInfo.avatarUrl :'../../static/user/touxiang-@2x.png'"
				  class="img" mode="aspectFill"></image> -->
				<!-- <view v-if="userInfo.avatarUrl" class="bianji" @click="navTo('/pages/user/profile')">
					编辑
				</view> -->
				<view class="name" @click="toLogin">
					<view class="myname">
						<text v-show="!userInfo.nickname">未设置昵称</text>
						<text v-show="userInfo.nickname">{{ userInfo.nickname }}</text>
					</view>
					<view class="qianming">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/028f5fc5ff6746e69b8c55c4dd96c393.png" mode=""></image>
						<view class="">{{ father }}</view>
						<view class="" style="margin-left: 20rpx;">{{ fatherPhone }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-lr bg-white shadow" style="border-radius: 16rpx 16rpx 8rpx 8rpx;width: 690rpx;height: 244rpx;margin-top: -130rpx;">
			<view class="padding-left padding-top padding-bottom-sm">我的订单</view>
			<view class="flex justify-around align-center padding-top-sm">
				<view @click="navTo('/pages/order/list?state=0')" class="flex align-center justify-center flex-direction allQuan" style="width: 108rpx;">
					<image src="../../static/user/all_order.png" mode="aspectFit" style="width: 46rpx;height: 50rpx;"></image>
					<view style="padding-top: 20rpx;font-size: 24rpx;color: #272B54;">全部订单</view>
					<!-- 	<view class="quan">
						5
					</view> -->
				</view>
				<view @click="navTo('/pages/order/list?state=1')" class="flex align-center justify-center flex-direction allQuan" style="width: 108rpx;">
					<image src="../../static/user/waitpay.png" mode="aspectFit" style="width: 46rpx;height: 50rpx;"></image>
					<view style="padding-top: 20rpx;font-size: 24rpx;color: #272B54;">待付款</view>
					<view class="quan" v-if="allOder.daifukuan != 0">{{ allOder.daifukuan }}</view>
				</view>
				<view @click="navTo('/pages/order/list?state=2')" class="flex align-center justify-center flex-direction allQuan" style="width: 108rpx;">
					<image src="../../static/user/daishouhuo@3x.png" mode="aspectFit" style="width: 46rpx;height: 50rpx;"></image>
					<view style="padding-top: 20rpx;font-size: 24rpx;color: #272B54;">待收货</view>
					<view class="quan" v-if="allOder.daishouhuo != 0">{{ allOder.daishouhuo }}</view>
				</view>
				<view @click="navTo('/pages/order/list?state=3')" class="flex align-center justify-center flex-direction allQuan" style="width: 108rpx;">
					<image src="../../static/user/shouhou@3x.png" mode="aspectFit" style="width: 46rpx;height: 50rpx;"></image>
					<view style="padding-top: 20rpx;font-size: 24rpx;color: #272B54;">待评价</view>
					<view class="quan" v-if="allOder.daipingjia != 0">{{ allOder.daipingjia }}</view>
				</view>
			</view>
		</view>

		<view v-if="storage">
			<view class="padding-lr padding-tb-sm"><image v-if="banner.imgUrl" :src="banner.imgUrl" mode="aspectFit" style="width: 690rpx;height: 184rpx;"></image></view>

			<view class="margin-lr margin-bottom-sm shadow bg-white" style="border-radius: 10rpx;">
				<!-- <view@click="navTo('/pages/user/zhaomoqishou')" class="flex align-center padding">
					<image src="../../static/user/tuanzhang.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">招募棋手</view>
				</view> -->
				<view @click="chengweiBtn" class="flex align-center padding">
					<image src="../../static/user/tuanzhang.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">成为团长</view>
				</view>
				<view @click="navTo('/pages/address/list')" class="flex align-center padding">
					<image src="../../static/user/location@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">地址管理</view>
				</view>
				<!-- <view class="flex align-center padding">
					<image src="../../static/user/notice@3x.png" mode="aspectFit"
					style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">我的消息</view>
				</view> -->
				<view @click="navTo('/pages/user/coupons')" class="flex align-center padding">
					<image src="../../static/user/notice@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">我的优惠券</view>
				</view>
				<view @click="navTo('/pagesA/PanicBuying/PanicBuying')" class="flex align-center padding">
					<image src="../../static/user/notice@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">我的抢购券</view>
				</view>
				<view @click="navTo('/pages/product/favorite')" class="flex align-center padding">
					<image src="../../static/user/collect@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">我的收藏</view>
				</view>
			</view>
			<view class="margin-lr margin-bottom-sm shadow bg-white" style="border-radius: 10rpx;">
				<view @click="navTo('/pages/user/deliver')" class="flex align-center padding">
					<image src="../../static/user/delivery.png" mode="aspectFit" style="width: 32rpx;height: 48rpx;transform: scale(1.2);"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">配送时间</view>
				</view>
				<button open-type="contact" class="flex align-center padding contact-btn">
					<image src="../../static/user/secretary@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">在线客服</view>
				</button>
				<view @click="navTo('/pages/user/about')" class="flex align-center padding">
					<image src="../../static/user/tip_round@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">关于</view>
				</view>
				<view @click="navTo('/pages/set/set')" class="flex align-center padding">
					<image src="../../static/user/setting@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">设置</view>
				</view>
				<view @click="GoList()" class="flex align-center padding">
					<image src="../../static/user/setting@3x.png" mode="aspectFit" style="width: 32rpx;height: 36rpx;"></image>
					<view class="padding-left-sm lem-text-black" style="font-size: 28rpx;">成为合作社</view>
				</view>
			</view>
		</view>
		<view v-else style="padding-top: 180rpx;padding-bottom: 180rpx;">
			<missing
				:buttonName="'换个地址试试吧~'"
				:handlerName="'buttonClick'"
				@buttonClick="chooseLocation"
				:imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%204%20%E6%8B%B7%E8%B4%9D@3x.png'"
				:desc="'当前地区不在配送范围哦'"
			></missing>
		</view>
		<!-- <view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatarUrl || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text @click="toLogin" class="username">{{ hasLogin? (userInfo.nickname || '未设置昵称') : '立即登录' }}</text>
				</view>
			</view> -->
		<!-- <view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn">
					立即开通
				</view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					{{isVip ? 'VIP会员' : '普通'}}
				</view>
				<text class="e-m">VIP权益</text>
				<text class="e-b">{{isVip ? '会员专享VIP价' : '请联系管理员开通会员'}}</text>
			</view> -->
		<!-- </view> -->

		<!-- <view 
			class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
		>
			<image class="arc" src="/static/arc.png"></image>
			 -->
		<!-- <view class="tj-sction">
				<view class="tj-item">
					<text class="num">128.8</text>
					<text>余额</text>
				</view>
				<view class="tj-item">
					<text class="num">0</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item">
					<text class="num">20</text>
					<text>积分</text>
				</view>
			</view> -->
		<!-- 订单 -->
		<!-- <view class="order-section">
				<view class="order-item" @click="navTo('/pages/order/list?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?state=10')"  hover-class="common-hover" :hover-stay-time="50">
					<text class="yticon icon-daifukuan"></text>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?state=30')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-yishouhuo"></text>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?state=60')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouhoutuikuan"></text>
					<text>退款/售后</text>
				</view>
			</view>
			
			 <view class="history-section icon">
				<view v-if="footprintList.length > 0" class="sec-header">
					<text class="yticon icon-lishijilu"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view v-if="footprintList.length > 0" scroll-x class="h-list">
					<image v-for="(item, index ) in footprintList" :key="index" @longpress="deleteFootprint(item)" @click="navTo('/pages/product/detail?id=' + item.spuId)" :src="item.spuImg " mode="aspectFill"></image>
				</scroll-view>
				<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/list')"></list-cell>
				<list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏" @eventClick="navTo('/pages/product/favorite')"></list-cell>
				<list-cell icon="icon-huifu" iconColor="#e07472" title="在线客服" :openType="'contact'"></list-cell>
				<list-cell icon="icon-tuandui" iconColor="#EE82EE" title="个人资料" @eventClick="navTo('/pages/user/profile')"></list-cell>
				 -->
		<!-- <list-cell icon="icon-iconfontweixin" iconColor="#EEEE00" title="我的优惠券" @eventClick="navTo('/pages/coupon/listTODO')"></list-cell> -->
		<!-- <list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="关于" @eventClick="navTo('/pages/user/about')"></list-cell>
				<list-cell icon="icon-shanchu4" iconColor="#e07472" title="退出登录" border="" @eventClick="logout()"></list-cell>
			</view> 
		</view> -->
	</view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
import missing from '@/components/missing.vue';
import { mapState } from 'vuex';
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		listCell,
		missing
	},
	data() {
		return {
			allOder: '',
			nickname: '',
			coverTransform: 'translateY(0px)',
			coverTransition: '0s',
			moving: false,
			footprintList: [],
			isVip: false,
			statusBarHeight: 88,
			storage: false,
			banner: {
				imgUrl: ''
			},
			userInfotz: {},
			avatarUrl: '',
			nickNameb: '',
			shenhezhong: '',
			father: '涞了么，来了',
			fatherPhone:'',
		};
	},
	onShow() {
		this.shenhezhong = uni.getStorageSync('shenhezhong');
		// this.nickNameb = uni.getStorageSync('nickNameb')
		// this.avatarUrl = uni.getStorageSync('avatarUrl')
		this.userInfotz = uni.getStorageSync('userInfo');
		console.log('userInfotz111', this.userInfotz);

		this.isVip = this.$api.isVip();
		this.loadFootprint();

		this.$store.state.storageId ? (this.storage = true) : (this.storage = false), this.chauxn();
		//如果用户已登录，获取购物车数量
		if (this.$store.state.userInfo.accessToken) {
			this.$api
				.request('cart', 'countCart')
				.then(res => {
					if (res.data > 0) {
						uni.setTabBarBadge({
							index: 2,
							text: res.data + ''
						});
					}
					this.$store.commit('addCart', res.data);
				})
				.catch(err => {
					// this.$api.msg('请求失败，请稍后再试')
				});
		}

		this.showAllOrder();
		this.showTuan();
	},
	onLoad() {
		this.nickname = uni.getStorageSync('nickname');

		try {
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
		} catch (e) {
			// error
		}
		this.$api
			.request('advertisement', 'getActiveAd', {
				adType: 8
			})
			.then(res => {
				this.banner = res.data[0];
			});
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navTo('/pages/set/set');
		} else if (index === 1) {
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: '/pages/notice/notice'
			});
		}
	},
	// #endif
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		showTuan() {
			console.log(55555);

			this.$api.request('activity', 'selectFatherInviteByUserId', {}).then(res => {
				if (res.data.length == 0) {
					this.father = '涞了么，来了';
						this.fatherPhone = '';
				} else {
					this.father = res.data[0].userDO.nickname;
						this.fatherPhone = res.data[0].userDO.phone;
				}
				
				
			});
		},
		showAllOrder() {
			if (this.userInfotz.id == undefined) {
				return;
			}
			this.$api
				.request('user', 'getUserOrderCount', {
					userId: this.userInfotz.id
				})
				.then(res => {
					this.allOder = res.data;
					// uni.hideLoading();
					console.log(res);
				});
		},
		GoList() {
			uni.navigateTo({
				url: '../list/list'
			});
		},
		chauxn() {
			if (this.userInfotz.id == undefined) {
				return;
			}
			var obj = {};
			obj.userId = this.userInfotz.id;
			var that = this;
			// console.log(obj,5566);
			that.$api
				.request('user', 'getUserInfo', obj, failres => {
					that.$api.msg(failres.errmsg);
					uni.hideLoading();
				})
				.then(res => {
					if (res.errno == '200') {
						if (res.data) {
							console.log(res.data);
							this.userInfotz = res.data;
							this.userInfotz.isChief = res.data.isChief;
						}
					}
				});
		},
		async loadFootprint() {
			const that = this;
			that.$api.request('footprint', 'getAllFootprint').then(res => {
				that.footprintList = res.data;
			});
		},
		chengweiBtn() {
			console.log('团长', this.userInfotz);

			if (this.userInfotz.isChief == '-1') {
				//未申请
				uni.navigateTo({
					url: '/pages/user/chengweiTZ'
				});
			}
			if (this.userInfotz.isChief == '0') {
				this.$api.msg('待审核');
				return;
			}

			if (this.userInfotz.isChief == '2') {
				this.$api.msg(this.userInfotz.remark);
				return;
			}
			if (this.userInfotz.isChief == '1') {
				//申请成功
				uni.navigateTo({
					url: '/pages/user/shouyiTZ'
				});
			}
		},
		deleteFootprint(item) {
			const that = this;
			uni.showModal({
				title: '删除？',
				content: '您确定要删除此足迹吗？',
				success: e => {
					if (e.confirm) {
						that.$api
							.request('footprint', 'deleteFootprint', {
								footprintId: item.id
							})
							.then(res => {
								that.loadFootprint();
							});
					}
				}
			});
		},

		toLogin() {
			console.log('this.hasLogin', this.hasLogin);
			// uni.navigateTo({
			// 	url: '/pages/public/login'
			// })
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		},

		logout() {
			const that = this;
			uni.showModal({
				title: '询问',
				content: '您确定要退出吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: e => {
					if (e.confirm) {
						that.$store.commit('logout');
						that.$api.logout();
					}
				}
			});
		},

		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				url = '/pages/public/login';
			}
			uni.navigateTo({
				url
			});
		},

		/**
		 *  会员卡下拉和回弹
		 *  1.关闭bounce避免ios端下拉冲突
		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
		 */
		coverTouchstart(e) {
			if (pageAtTop === false) {
				return;
			}
			this.coverTransition = 'transform .1s linear';
			startY = e.touches[0].clientY;
		},
		coverTouchmove(e) {
			moveY = e.touches[0].clientY;
			let moveDistance = moveY - startY;
			if (moveDistance < 0) {
				this.moving = false;
				return;
			}
			this.moving = true;
			if (moveDistance >= 80 && moveDistance < 100) {
				moveDistance = 80;
			}

			if (moveDistance > 0 && moveDistance <= 80) {
				this.coverTransform = `translateY(${moveDistance}px)`;
			}
		},
		coverTouchend() {
			if (this.moving === false) {
				return;
			}
			this.moving = false;
			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
			this.coverTransform = 'translateY(0px)';
		},
		//配送外区域选择区域
		chooseLocation() {
			uni.chooseLocation({
				success: res1 => {
					console.log(res1);
					this.district = res1.name;
					uni.showLoading({
						title: '加载中...'
					});
					this.$api
						.request(
							'position',
							'getRecentlyStorage',
							{
								lng: res1.longitude,
								lat: res1.latitude
							},
							failres => {
								uni.hideLoading();
								this.logining = false;
								this.$api.msg(failres.errmsg);
								this.$store.commit('setStorage', 11);
								this.loadData(11);
								if (!11) {
									this.storage ? (this.storage = false) : (this.storage = true);
								} else {
									this.loadRecommand('refresh');
								}
							}
						)
						.then(res => {
							uni.hideLoading();
							console.log(res);
							// res.data.id = 11
							this.$store.commit('setStorage', res.data.id);
							this.newTop = [];
							this.cheapRecommend = [];
							this.salesTop = [];
							this.loadData(res.data.id);
							if (!res.data.id) {
								this.storage = false;
							} else {
								this.storage ? (this.storage = false) : (this.storage = true);
								// this.loadRecommand('refresh')
							}
						});
				}
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f1f1f1;
}

.newgeren {
	width: 750rpx;
	height: 320rpx;
	background-color: #68c628;
	/* background-image: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/imgs/b4ecaf9892510b7c012bf80dcbde4a3.png); */
	background-size: 100% 100%;

	.title {
		height: 120rpx;
		padding-left: 24rpx;
		padding-top: 30rpx;
		/* background-color: red; */
		display: flex;
		align-items: center;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		position: relative;

		.bianji {
			position: absolute;
			left: 45rpx;
			bottom: -20rpx;
			width: 76rpx;
			height: 32rpx;
			background: #46d253;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		.name {
			margin-left: 16rpx;

			.qianming {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}

			.myname {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #ffffff;
			}
		}

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
		}
	}
}

.contact-btn {
	border: none;
	background-color: #ffffff;
}

.contact-btn::after {
	border: none;
}

.top-title {
	background-image: url(http://qiniuoss.nauzone.cn/%E7%BC%96%E7%BB%84%2013@3x.png);
	background-repeat: no-repeat;
	background-size: 100%;
	color: #fff;
	height: 150rpx;
	width: 750rpx;
	text-align: center;
	padding-top: 60rpx;
	position: fixed;
	z-index: 999;
}

.bg-user-gradual-green {
	background-image: url(../../static/banner.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	height: 454rpx;
	width: 750rpx;
	overflow: hidden;
}

.shadow {
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}

%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.user-section {
	height: 520upx;
	padding: 100upx 30upx 0;
	position: relative;

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		opacity: 0.7;
	}
}

.user-info-box {
	height: 180upx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;

	.portrait {
		width: 130upx;
		height: 130upx;
		border: 5upx solid #fff;
		border-radius: 50%;
	}

	.username {
		font-size: $font-lg + 6upx;
		color: $font-color-dark;
		margin-left: 20upx;
	}
}

.vip-card-box {
	display: flex;
	flex-direction: column;
	color: #f7d680;
	height: 240upx;
	background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
	border-radius: 16upx 16upx 0 0;
	overflow: hidden;
	position: relative;
	padding: 20upx 24upx;

	.card-bg {
		position: absolute;
		top: 20upx;
		right: 0;
		width: 380upx;
		height: 260upx;
	}

	.b-btn {
		position: absolute;
		right: 20upx;
		top: 16upx;
		width: 132upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		color: #36343c;
		border-radius: 20px;
		background: linear-gradient(left, #f9e6af, #ffd465);
		z-index: 1;
	}

	.tit {
		font-size: $font-base + 2upx;
		color: #f7d680;
		margin-bottom: 28upx;

		.yticon {
			color: #f6e5a3;
			margin-right: 16upx;
		}
	}

	.e-b {
		font-size: $font-sm;
		color: #d8cba9;
		margin-top: 10upx;
	}
}

.cover-container {
	background: $page-color-base;
	margin-top: -150upx;
	padding: 0 30upx;
	position: relative;
	background: #f5f5f5;
	padding-bottom: 20upx;

	.arc {
		position: absolute;
		left: 0;
		top: -34upx;
		width: 100%;
		height: 36upx;
	}
}

.tj-sction {
	@extend %section;

	.tj-item {
		@extend %flex-center;
		flex-direction: column;
		height: 140upx;
		font-size: $font-sm;
		color: #75787d;
	}

	.num {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 8upx;
	}
}

.order-section {
	@extend %section;
	padding: 28upx 0;
	margin-top: 20upx;

	.order-item {
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $base-color;
	}

	.yticon {
		font-size: 48upx;
		margin-bottom: 18upx;
		color: $base-color;
	}

	.icon-shouhoutuikuan {
		font-size: 44upx;
	}
}

.history-section {
	padding: 30upx 0 0;
	margin-top: 20upx;
	background: #fff;
	border-radius: 10upx;

	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40upx;
		margin-left: 30upx;

		.yticon {
			font-size: 44upx;
			color: #5eba8f;
			margin-right: 16upx;
			line-height: 40upx;
		}
	}

	.h-list {
		white-space: nowrap;
		padding: 30upx 30upx 0;

		image {
			display: inline-block;
			width: 160upx;
			height: 160upx;
			margin-right: 20upx;
			border-radius: 10upx;
		}
	}
}
.allQuan {
	/* background-color: red; */
	position: relative;
	/* z-index: 115; */
	.quan {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 40rpx;
		border-radius: 9999rpx;
		/* background-color: red; */
		border: 1rpx solid #39b54a;
		position: absolute;
		top: -20%;
		color: #39b54a;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		right: 0%;
	}
}
</style>
